<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情页</title>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/flexible.js"></script>
  <script src="./js/detailpages.js"></script>
  <script src="./js/util.js"></script>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/detailpages.css">
  <link rel="stylesheet" href="./font/font_ztpsnsgjty/iconfont.css">
</head>
<style>
  
</style>
<body>
  <div class="box">
    <div class="top">
      <a href="./page.html">
        <p>&lt;</p>
        <div> 返回</div>
      </a>
      <p class="xiangqing">详情</p>
    </div>
    <div class="xuanran">
      
    </div>
    <div class="fotter">
      <div class="fotter1 kuan">
        <div class="iconfont icon-wo">

        </div>
        <div>
          客服
        </div>
      </div>
      <div class="fotter1 margin kuan">
        <div class="iconfont icon-gouwuche">

        </div>
        <div>
          购物车
        </div>
      </div>
      <div class="fotterBtn">
        <div class="fotterBtn1">
          加入购物车
        </div>
        <div class="fotterBtn2">
          立即购买
        </div>
      </div>
    </div>

  </div>

</body>
<script>
    
  let castingList = document.querySelector('.carousel-inner'); // 获取轮播图列表的容器
  let aboutlList = document.querySelector('.about'); // 获取详情列表的容器
  let detailList = document.querySelector('.det'); // 获取图片列表的容器
  myPromiseAjax({
      url: `http://39.105.198.203:3001/prod/det?tid=${location.search[5]}`,
  }).then(data => {

      castingList.innerHTML = ''; // 清空轮播图列表
      detailList.innerHTML = ''; // 清空图片列表
      console.log(data.data.imgarr);
      // 生成茶列表
      // 使用 data.data.list[i].tid 作为链接的 ID
      castingList.innerHTML = `<div class="carousel-item active">
                  <img src='${data.data.imgarr[0]}' class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img src='${data.data.imgarr[1]}' class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img src='${data.data.imgarr[2]}' class="d-block w-100" alt="...">
                </div>`;
      aboutlList.innerHTML = `<div class="ioc">
              <img src="${data.data.fullSrc}" alt="">
          </div>
          <div class="text">
              <div class="teaName">${data.data.tname}</div>
              <div class="teaDesc">${data.data.tintro}</div>
              <div class="teaPrice">¥ <span class="fontBig">${data.data.price}</span> .00</div>
          </div>  `;

      detailList.innerHTML = `<img src=${data.data.fullSrc} alt=""></img>`


  }).catch(err => {
      console.log(err);
  });
</script>
</html>